<template>
  <el-dialog width="22%" v-model="forgetPasswordDialog" draggable>
    <el-form ref="formEl" class="loginForm" :model="formLabelAlign" :rules="rules">
      <el-form-item>
        <span style="margin: 0 auto">用户注册</span>
        <el-input
          v-model="formLabelAlign.name"
          placeholder="请输入用户名"
          prop="name"
        />
      </el-form-item>
      <el-form-item label="手机号"  prop="phone">
        <el-input
          v-model="formLabelAlign.phone"
          type="text"
          placeholder="请输入手机号"
        
        />
      </el-form-item>
      <el-form-item
        style="
          display: flex;
          justify-content: space-between;
          position: relative;
          justify-content: space-between;
        "
      >
        <el-input
          style="width: 65%"
          v-model="formLabelAlign.yzm"
          type="text"
          placeholder="验证码"
          prop="code"
        />
        <el-button
          type="primary"
          style="width: 30%"
          :disabled="countdown > 0"
          @click="sendCode"
        >
          {{ countdown > 0 ? ` ${countdown}秒后重试 ` : "获取验证码" }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formLabelAlign.password"
          type="password"
          placeholder="请输入密码"
          prop="password"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" style="width: 100%">立即注册</el-button>
    <el-row>
      <el-col :span="12">
        <div class="leftBox grid-content ep-bg-purple">忘记密码</div>
      </el-col>
      <el-col :span="12">
        <div class="rightBox grid-content ep-bg-purple-light">
          已有账号？<el-link type="primary">马上登录</el-link>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
const formLabelAlign = ref({
  name: "",
  phone: "13800013800",
  password: "",
  yzm: "",
});
//表单验证规则
const rules = reactive({
  name: [
    { required: true, message: "用户名不能为空", trigger: "blur" }, // 必填
    { max: 6, message: "用户名长度不能超过6位", trigger: "blur" }, // 不超过6位
    {
      pattern: /^[a-zA-Z0-9]+$/, // 正则表达式：纯数字、纯字母或数字与字母组合
      message: "用户名只能包含数字和英文字母",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "手机号不能为空", trigger: "blur" }, // 必填
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号格式不正确",
      trigger: "blur",
    },
  ],
  code: [
    { required: true, message: "验证码不能为空", trigger: "blur" },
    {
      pattern: /^\d{6}$/,
      message: "验证码必须是6位数字",
      trigger: "blur",
    },
  ],

});

// //登录函数
// const loginFunction = () => {
//   // console.log('登录');
//   // if(formLabelAlign.value.name === )

// }
const forgetPasswordDialog = ref(false);
//打开弹窗
//打开弹窗
const open = () => {
  forgetPasswordDialog.value = true;
};
defineExpose({
  open,
});

//验证码
// 是否手机号格式正确
const formEl = ref(null);
const isPhoneValid = ref(false);


// 倒计时
const countdown = ref(0);

// 发送验证码
const sendCode = () => {

  
  // 验证手机号
  formEl.value.validateField("phone", (errorMessage) => {

    
    if (!errorMessage) {

      return;
    }

    // 开始倒计时
    countdown.value = 30;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    // 模拟发送验证码
    ElMessage.success("验证码已发送，请注意查收！");
  });
};

// 提交表单
const submitForm = () => {
  formEl.value.validate((valid) => {
    if (valid) {
      ElMessage.success("表单验证通过！");
      // 这里可以执行提交逻辑
    } else {
      ElMessage.error("表单验证失败，请检查输入！");
    }
  });
};
</script>
<style lang="scss" scoped>
// .mainBox {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   text-align: center;
//   width: 20%;
//   // .cardBox{
//   //   width:300px;
//   //   margin-top:300px;

//   //   .el-button {
//   //     width:100%;
//   //     border-radius: 0px;
//   //   }
//   //   .el-row {
//   //     font-size:12px;
//   //     margin-top:10px;
//   //     .leftBox {
//   //        text-align: left;
//   //     }
//   //     .rightBox{
//   //       display: flex;
//   //       justify-content: flex-end;
//   //       align-items: center;
//   //     }
//   //   }
//   // }
// }
</style>
